import React, { Ref, useContext, useEffect, useRef, useState } from 'react';
import { Button, Image, Spin, Tooltip } from 'antd';
import { history } from 'umi';
import { ExpertsUpdateContext } from '../common/ExpertsContext';
import { DictionarySpan } from '../common/Format';
import { getBaseUrl } from '@/services/urlconst';
import { DeleteOutlined } from '@ant-design/icons';
import { btntTxtStyle, getKeyRouter, onMouseOutBtn } from '@/utils';
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import pageStyles from '@/common/pageLayout.less';
import { ExpertsUpdateService } from '../services/UpdateService';

const UpdateExpertsCertificateInfo: React.FC<any> = ({ infoData }) => {
  const { prefixCls, expertsInfo } = useContext(ExpertsUpdateContext);

  const { attachURL, attachTypeName, attachContent, isExpire } = infoData;

  const reloadLayoutRef: Ref<IOneModalRef> = useRef(null);

  const [isOpenDelModel, setIsOpenDelModel] = useState(false);

  const { delExpertsCertificateLoading, delExpertsCertificateRun } = ExpertsUpdateService().delExpertsCertificateService((res) => {
    if (res?.msgFlag) {
      history.replace({
        pathname: `/expertInfoController/editExpert/:${getKeyRouter()}${getKeyRouter()}`,
        state: {
          type: 'edit',
          title: '编辑专家信息',
          info: expertsInfo,
          delRouterName: history.location.pathname,
        },
      });
      // findExpertsRun(expertsInfo.id );
    }
  });

  const onSave = async () => {
    const params = {
      delAttachURL: attachURL,
      id: infoData?.id,
    };
    await delExpertsCertificateRun(params);
    reloadLayoutRef.current?.onModalCancel();
  };

  const footerRender = () => {
    return (
      <>
        <Button
          onClick={() => {
            reloadLayoutRef.current?.onModalCancel();
          }}
        >
          取消
        </Button>
        <Button type={'primary'} onClick={onSave}>
          确认
        </Button>
      </>
    );
  };

  return (
    <Spin spinning={delExpertsCertificateLoading}>
      <div className={`${prefixCls}certificateInfo`}>
        <div className={`${prefixCls}certificateInfo-picture`}>
          <Image width={'100%'} height={'100%'} src={`${getBaseUrl()}${attachURL}`} />
        </div>
        {attachTypeName && (
          <dl style={{ padding: '0 10px' }}>
            <dt>证书类型：</dt>
            <dd>{DictionarySpan(attachTypeName)}</dd>
            <dt>是否永久有效：</dt>
            <dd>{isExpire == 1 ? '是' : '否'}</dd>
          </dl>
        )}
        <dl style={{ padding: '5px 10px' }}>
          <dt>证书描述：</dt>
          <dd>{attachContent}</dd>
        </dl>
        {expertsInfo?.id && (history?.location?.state as any)?.type != 'view' && (
          <dl style={{ display: 'flex', justifyContent: 'end', padding: '5px 10px' }}>
            <Button
              size="small"
              // icon={<DeleteOutlined />}
              type={'link'}
              danger
              className="manageBtntTxtStyle"
              onMouseUp={onMouseOutBtn}
              onClick={() => setIsOpenDelModel(true)}
            >
              删除当前证书
            </Button>
          </dl>
        )}
      </div>
      {isOpenDelModel && (
        <OneModal
          open={true}
          getContainer={false}
          ref={reloadLayoutRef}
          title={'证书删除'}
          className={'certificate-info-modal'}
          width={550}
          onCancel={() => {
            setIsOpenDelModel(false);
          }}
          footer={footerRender()}
          bodyStyle={{
            padding: '5px 0px',
          }}
          centered
        >
          <div className={pageStyles['fromView-styles']} style={{ padding: '0 20px' }}>
            您确定要删除当前证书吗？
          </div>
        </OneModal>
      )}
    </Spin>
  );
};

export default UpdateExpertsCertificateInfo;
